Графический редактор Photoshop 2017
Photoshop (Фотошоп) – самый популярный в мире графический редактор, в котором, помимо прочего, рисуются макеты дизайна для сайтов в формате PSD. Безусловно, макеты можно рисовать и в любой другой программе, но чаще всего рисуется именно в Photoshop (Фотошоп). Этот редактор – своего рода Must Have для любого серьезного front-end разработчика и обойти стороной его попросту невозможно.
Конечно, front-end разработчику совершенно не обязательно знать, как ретушировать фотографии в Photoshop. Не обязательно знать все принципы дизайна и знать, как с нуля правильно создавать дизайн сайта, но базовый функционал редактора для front-end разработчика мы просто обязаны знать. Без этого невозможно сверстать полноценную страницу.
Front-end разработчик должен уметь пользоваться слоями, линейками, направляющими. Нужно уметь работать со шрифтами в Photoshop, чтобы при верстке применить нужный шрифт, нужного размера и нужной жирности и начертания, нужного цвета. Необходимо уметь пользоваться основными инструментами Photoshop, без которых невозможно сверстать веб-страницу. Photoshop позволяет перед сохранением оптимизировать изображения специально для «web», и этим тоже обязательно нужно уметь пользоваться и применять при верстке.
В данном курсе мы с вами сделаем все необходимые настройки Photoshop. Настроим рабочее пространство, уберем все лишнее, чтобы было удобно работать front-end разработчику. И, конечно, разберем на примере все возможности Photoshop необходимые верстальщику для перевода дизайна в полноценную html страницу.


Урок 1. Графический редактор Adobe Photoshop. Скачивание и установка Photoshop:
От автора: судя по вопросам, которые достаточно часто нам задают на нашем форуме и в нашу службу поддержки, для многих вызывают трудности скачивание и установка Photoshop. Поэтому данный курс я начну с того, что покажу, как и где нужно скачивать Photoshop и, как его установить.
В уроке мы зарегистрируемся на официальном сайте Adobe, и пройдем все необходимые шаги для скачивания и установки Photoshop.


Урок 2. Графический редактор Adobe Photoshop. Настройка рабочего пространства Photoshop:
От автора: в прошлом уроке мы с вами скачали и установили Photoshop. И если вы к этому моменту уже запустили его, то увидели сразу много различных панелей инструментов. Как я уже говорил, большая часть из них нам не понадобится.
В данном уроке мы с вами настроим рабочее пространство, скроем все не нужные нам в работе панели, чтобы было удобно пользоваться Photoshop. Разберемся, где находятся скрытые панели, если вдруг они понадобятся в будущем.
Так же в Photoshop есть несколько цветовых установок. В зависимости от того, какую установку применить, могут возникнуть некоторые проблемы с отображением цвета. Например, вы смотрите код нужного вам цвета в Photoshop, прописываете в качестве фонового цвета этот код, а в браузере цвет отличается от цвета в Photoshop. В уроке рассмотрим, как настроить Photoshop так, чтобы такого несоответствия не возникало.


Урок 3. Графический редактор Adobe Photoshop. Возможности и функции Photoshop:
От автора: в данном уроке мы на примере работы с конкретным макетом начнем изучения возможностей и необходимых функций Photoshop. Сделаем наше рабочее пространство еще более удобным для работы с макетом, воспользовавшись линейками и направляющими.
Рассмотрим работу с самыми необходимыми для верстальщика инструментами Photoshop. Разберем необходимые «горячие» клавиши, которыми приходится пользоваться очень часто. Подробно рассмотрим работу с нестандартными шрифтами в Photoshop.
Хорошие макеты Photoshop всегда состоят из нескольких слоев. Если слоев очень много, то они разбиты по папкам, которые включают слои, относящиеся к определенным элементам макета. В уроке мы также научимся работать со слоями.


Урок 4. Графический редактор Adobe Photoshop. Как вырезать изображения в Photoshop:
От автора: основная работа с макетом Photoshop при верстке веб-страниц заключается в вырезании нужных картинок из макета и сохранение их. В данном уроке мы рассмотрим все тонкости вырезания изображений. Рассмотрим приемы, как вырезать очень маленькие изображения, как вырезать изображения точно нужных размеров, как в макете.
После того, как изображение вырезано, его необходимо сохранить. Photoshop позволяет оптимизировать перед сохранением изображения «для веб». Этим обязательно нужно пользоваться. В уроке мы научиться сохранять изображения «для веб», рассмотрим все возможные настройки для этого и, что они означают. Так же рассмотрим все возможные форматы и, чем они отличаются. Так же поговорим о том, какой формат изображений в каком случае использовать.